<template>
  <div>
    <div class="tab" style="display: flex;justify-content: space-around;margin-top: 30px;font-size: 14px;">
      <!-- <div class="tab" style="display: flex;align-items: center">
            <div>订单号：</div>
            <div class="tabSearch" style="display: flex;">
                <el-input style="margin: 0 10px ;" v-model="orderData" placeholder="请输入订单号" @input="orderNum"></el-input>
            </div>
        </div> -->

      <template v-if="orderType != 4">

        <div style="display: flex;align-items: center">
          <div>选择专家</div>
          <el-select v-model="inputName" style="margin: 0 10px ;" placeholder="选择专家" @change="handleChangeExpert">
            <el-option v-for="item in expertDataList" :key="item.id" :label="item.nickname" :value="item.id" />
          </el-select>
        </div>

        <div v-if="roles != 6" style="display: flex;align-items: center">
          <div>订单状态</div>
          <el-select v-model="orderStatus" style="margin: 0 10px ;" placeholder="选择状态" @change="handleChange">
            <el-option v-for="item in orderStatusList" :key="item.id" :label="item.nickname" :value="item.id" />
          </el-select>
        </div>

      </template>
      <div class="tab" style="display: flex;align-items: center">
        <div>手机号</div>
        <div class="tabSearch" style="display: flex;">
          <el-input v-model="phoneNumber" style="margin: 0 10px ;" placeholder="请输入手机号" @input="phoneNum" />
          <!-- <el-button type="primary" icon="el-icon-search" @click="searchExpert">搜索</el-button> -->
        </div>
      </div>

      <div v-if="roles != 6" style="display: flex;align-items: center">
        <div>购买类型</div>
        <el-select v-model="orderType" style="margin: 0 10px ;" placeholder="购买类型" @change="handleChangeType">
          <el-option v-for="item in payTypeList" :key="item.id" :label="item.nickname" :value="item.id" />
        </el-select>
      </div>
      <div class="block">
        <span class="demonstration" style="margin-right: 10px;">订单时间</span>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"

          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDateChange"
        />
      </div>
    </div>
    <div style="margin: 30px;">
      <span style="margin-right: 30px;">总消耗：<span style="font-weight: bold;color: red;">{{ sumData.all_score }}</span></span>
      <span style="margin-right: 30px;">{{ !orderType ? " 会员方案消耗" : "日消耗" }}：<span style="font-weight: bold;color: red;">{{ sumData.day_score }}</span></span>
      <span v-if="!orderType" style="margin-right: 30px;">AI会员消耗：<span style="font-weight: bold;color: red;">{{ sumData.goodOrbad_day_score }}</span></span>
      <span v-if="!orderType" style="margin-right: 30px;">AI小球消耗：<span style="font-weight: bold;color: red;">{{ sumData.predic_day_score }}</span></span>

    </div>

    <div style="display: flex;justify-content: flex-end; position: absolute;top: 100px; right:40px;">
      <el-button type="primary" @click="exportOrder">导出</el-button>
    </div>

    <div v-show="orderType!=3 && orderType!=4">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="id" label="ID" align="center" />
        <el-table-column v-if="roles != 6" prop="mobile" label="手机号" align="center" />
        <el-table-column prop="remark" label="备注" align="center" />
        <el-table-column prop="create_time" label="创建时间" align="center" />
        <!-- <el-table-column prop="pay_time" label="支付时间" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.pay_time==null">
                    --
                </div>
                <div v-else>{{ scope.row.pay_time }}</div>
            </template>

            </el-table-column> -->
        <el-table-column prop="nickname" label="昵称" align="center" />
        <el-table-column v-if="!orderType || orderType === '1'" prop="expert_name" label="专家名称" align="center" />
        <el-table-column v-if="!orderType || orderType === '1'" label="专家头像" align="center">
          <template slot-scope="scope">
            <img v-if="scope.row.expert_avatar" :src="scope.row.expert_avatar" style="width: 50px; height: 50px; border-radius: 50%;">
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="user_reg_time" label="注册时间" align="center" />
        <el-table-column prop="status_text" label="订单状态" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status_text=='已购买'">
              <el-tag type="danger">已购买</el-tag>
            </div>
            <div v-else>
              <el-tag type="success">已退款</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type_text" label="购买类型" align="center" />
        <el-table-column prop="category_text" label="购买类型详情" align="center" />
        <el-table-column prop="title" label="购买内容" align="center" />
        <el-table-column prop="score" label="金额" align="center" />
        <el-table-column prop="no_win_back_text" label="是否不中退" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.no_win_back_text=='是'" style="color: red;">
              <span>{{ scope.row.no_win_back_text }}</span>
            </div>
            <div v-else>
              <span>{{ scope.row.no_win_back_text }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="is_give_text" label="购买/赠送" align="center" />
        <!-- <el-table-column prop="origin_price" label="原价" align="center">

            </el-table-column>
            <el-table-column prop="price" label="支付金额" align="center">

            </el-table-column> -->

      </el-table>
    </div>

    <div v-show="orderType==3">
      <el-table :data="aiTable" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="id" label="ID" align="center" />
        <el-table-column prop="mobile" label="手机号" align="center" />
        <el-table-column prop="remark" label="备注" align="center" />
        <el-table-column prop="create_time" label="创建时间" align="center" />
        <el-table-column prop="nickname" label="昵称" align="center" />
        <!-- <el-table-column prop="status_text" label="订单状态" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.status_text=='已购买'">
                        <el-tag type="danger">已购买</el-tag>
                </div>
                <div v-else>
                    <el-tag type="success">已退款</el-tag>
                </div>
        </template>
            </el-table-column> -->
        <el-table-column prop="type_text" label="购买类型" align="center" />
        <el-table-column prop="order_end_time" label="到期时间" align="center" />
        <el-table-column prop="score" label="金额" align="center" />
        <!-- <el-table-column prop="title" label="购买内容" align="center">

            </el-table-column> -->
        <!-- <el-table-column prop="score" label="金额" align="center">

            </el-table-column> -->
      </el-table>
    </div>

    <div v-show="orderType==4">
      <el-table :data="aixqTable" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="id" label="ID" align="center" />

        <el-table-column prop="status_text" label="昵称" align="center">
          <template slot-scope="scope">
            {{ scope.row.user.nickname }}
          </template>
        </el-table-column>

        <el-table-column prop="status_text" label="备注" align="center">
          <template slot-scope="scope">
            {{ scope.row.user.remark }}
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" align="center" />

        <el-table-column prop="create_time" label="创建时间" align="center" />
        <el-table-column prop="status_text" label="购买类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.card.title }}
          </template>
        </el-table-column>

        <el-table-column prop="status_text" label="金额" align="center">
          <template slot-scope="scope">
            {{ scope.row.card.price }}
          </template>
        </el-table-column>

      </el-table>
    </div>

    <div class="tabListPage">
      <el-pagination
        v-if="orderType != 4"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="PageSize"
        :layout="`total, sizes, prev, pager, next, jumper`"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <el-pagination
        v-else
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="PageSize"
        :layout="`total,  prev, pager, next, jumper`"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { consumeOrderList, expertList } from '../../../libs/api'
export default {
  data() {
    return {
      tableData: [],
      orderData: '',
      orderType: '',
      phoneNumber: '',
      orderStatus: '',
      value1: '',
      orderStatusList: [{
        nickname: '已购买',
        id: '1'
      }, {
        nickname: '已退款',
        id: '2'
      }],
      payTypeList: [{
        nickname: '方案',
        id: '1'
      }, {
        nickname: '会员',
        id: '2'
      }, {
        nickname: 'ai会员',
        id: '3'
      },
      {
        nickname: 'ai小球',
        id: '4'
      }
      ],
      allOodData: [],
      currentPage: 1,
      totalCount: 1,
      PageSize: 10,
      pageSizes: [5, 10],
      alltabData: [],
      orderTime: '',
      sumData: {},
      expertDataList: [],
      inputName: '',
      aiTable: [],
      aixqTable: [],
      roles: ''
    }
  },
  created() {
    this.getOrderList()
    this.getExpertList()

    this.roles = localStorage.getItem('roles')
  },
  methods: {
    // 获取专家
    getExpertList() {
      expertList({
        page: 1,
        limit: 1000
      }).then(res => {
        this.expertDataList = res.data.list
      })
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val
      this.getOrderList()
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      console.log(8888)
      // 改变每页显示的条数
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      console.log(val)
      this.PageSize = val
      // 改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
      this.getOrderList()
    },
    handleDateChange(value) {
      console.log(value)
      this.orderTime = value[0] + '_' + value[1]
      const newDate1 = value[0].getFullYear() + '-' + (value[0].getMonth() + 1) + '-' + value[0].getDate()
      const newDate2 = value[1].getFullYear() + '-' + (value[1].getMonth() + 1) + '-' + value[1].getDate()
      console.log(newDate1 + '-' + newDate2)
      this.orderTime = newDate1 + '_' + newDate2
      this.getOrderList()
    },
    handleChangeExpert(value) {
      this.getOrderList()
      console.log(value)
    },
    getOrderList() {
      consumeOrderList({
        page: this.currentPage,
        limit: this.PageSize,
        status: this.orderStatus,
        type: this.orderType,
        order_time: this.orderTime,
        mobile: this.phoneNumber,
        expert_id: this.inputName
      }).then(res => {
        console.log(res)
        // this.tableData = []
        if (this.orderType === '4') {
          this.aixqTable = res.data.data
          this.alltabData = res.data.data
          console.log(this.aixqTable)
        } else if (this.orderType === '3') {
          this.aiTable = res.data.data
          this.alltabData = res.data.data
          console.log(this.aiTable)
        } else {
          this.tableData = res.data.list
          this.alltabData = res.data.list
        }
        // this.tableData = res.data.list
        // this.alltabData = res.data.list
        this.totalCount = res.data.total
        this.sumData = res.data.sum

        console.log(this.totalCount)
        console.log(this.sumData)
      })
    },
    orderNum() {
      this.getOrderList()
    },
    phoneNum() {
      this.getOrderList()
    },
    handleChange() {
      this.getOrderList()
    },
    handleChangeType() {
      this.getOrderList()
    },

    exportOrder() {
      consumeOrderList({
        page: this.currentPage,
        limit: this.PageSize,
        status: this.orderStatus,
        type: this.orderType,
        order_time: this.orderTime,
        mobile: this.phoneNumber,
        expert_id: this.inputName,
        export: 1
      }).then(res => {
        window.location.href = res.data.url
      })
    }

  }
}
</script>
<style>

</style>
